<template>
    <div class="edit-page clear-float">
        <div class="alert">
            <div class="alert-box">
                <div class="edit-wrap clear-float">
                    <div class="add-class">
                        <h2>升级班级</h2>
                        <i class="el-icon-close close" @click="cancel"></i>
                        <el-form ref="form-class" :model="formClass" label-width="80px" class="add-class-form" label-position="left">
                            <el-form-item label="班级名称" prop="className">
                                <el-input disabled v-model="formClass.className"  class="select-block"></el-input>
                            </el-form-item>
                            <el-form-item label="教材(册)" prop="textbooks">
                                <el-select v-model="formClass.textbooks" placeholder="请选择教材" class="select-block">
                                    <el-option :label="v.mc" :value="v.id + ''" v-for="v in bookList"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="老师" prop="teachers">
                                <el-select v-model="formClass.teachers" placeholder="请选择老师" class="select-block">
                                    <el-option :label="v.zwm" :value="v.id + ''" v-for="v in teacherList"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="副班主任" prop="teacherBoss">
                                <el-select v-model="formClass.teacherBoss" placeholder="请选择副班主任" class="select-block">
                                    <el-option :label="v.zwm" :value="v.id + ''" v-for="v in teacherBossList"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="学生人数" prop="studentNumber">
                                <el-input disabled v-model.number="formClass.studentNumber"  class="select-block"></el-input>
                            </el-form-item>
                            <el-form-item label="开班日期" prop="classDate">
                                <el-input disabled v-model="formClass.classDate"  class="select-block"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>


                    <!-- <div class="add-student right">
                        <h2>升级学生</h2>
                        <el-form ref="form-student" :model="formStudent" label-width="100px" class="add-class-form">
                            <el-form-item label="选择学生" prop="studentName">
                                <el-input v-model="formStudent.student"></el-input>
                            </el-form-item>
                        </el-form>
                        <el-table :data="addStudentList" border stripe align="center" class="admin-table" @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column :prop="v.prop" :label="v.label" v-for="(v,index) in studentTitleList" align="center" min-width="130" show-overflow-tooltip></el-table-column>
                        </el-table>
                    </div> -->
                </div>

                <el-button type="info" class="submit" @click="submit">提交</el-button>
                <el-button @click="cancel" type="text">取消</el-button>
            </div>
        </div>
        <LoadingComponent v-if="isLoading"></LoadingComponent>
    </div>
</template>

<script type="text/javascript">
    import LoadingComponent from 'components/loading'
    export default {
        components: { LoadingComponent },
        props:['params'],
        data () {
            return {
                formClass: {
                    className: '',
                    textbooks: '',
                    teachers: '',
                    teacherBoss: '',
                    studentNumber: '',
                    classDate: ''
                },

                teacherBossList: [],
                teacherList: [],
                bookList: [],
                isLoading: false,

                formStudent: {
                    phoneNumber: '',
                    students: ''
                },
                studentTitleList: [
                    {
                        prop: 'studnetPhone',
                        label: '学生手机号'
                    },
                    {
                        prop: 'studentNme',
                        label: '学生名称'
                    }
                    ,{
                        prop: 'studentEnglishName',
                        label: '学生英文名称'
                    }
                ],
                addStudentList: [
                    // {
                    //     studnetPhone: 123456789,
                    //     studentNme: '陈冬',
                    //     studentEnglishName: 'chendong'
                    // },
                    // {
                    //     studnetPhone: 123456789,
                    //     studentNme: '陈冬',
                    //     studentEnglishName: 'chendong'
                    // },
                    // {
                    //     studnetPhone: 123456789,
                    //     studentNme: '陈冬',
                    //     studentEnglishName: 'chendong'
                    // },
                    // {
                    //     studnetPhone: 123456789,
                    //     studentNme: '陈冬',
                    //     studentEnglishName: 'chendong'
                    // }
                ],
                rulesClass: {
                    className: [
                        { required: true, message: '请输入班级名称', trigger: 'blur' }
                    ],
                    textbooks: [
                        { required: true, message: '请选择教材(册)', trigger: 'change' }
                    ],
                    teachers: [
                        { required: true, message: '请选择老师', trigger: 'change' }
                    ],
                    // teacherBoss: [
                    //     { required: true, message: '请选择副班主任', trigger: 'change' }
                    // ],
                    studentNumber: [
                        { required: true, message: '学生人数不能为空'},
                        { type: 'number', message: '学生人数必须为数字值'}
                    ],
                    // classDate: [
                    //     { required: true, message: '请输入开班日期', trigger: 'blur' }
                    // ]
                    
                }
            }
        },
        created () {
            this.formClass = {
                className: this.params.row.mc,
                textbooks: this.params.row.jcmc,
                teachers: this.params.row.lszwm,
                teacherBoss: this.params.row.zjmc,
                studentNumber: this.params.row.number,
                classDate: this.params.row.sj
            }
            // this.$store.dispatch('changeTitle',"编辑")
            this.getteacherList()
            this.getBookList()
        },
        methods: {
            handleSelectionChange(val) {
                // this.multipleSelection = val;
                console.log(val)
            },
            submit () {
                this.isLoading = true;
                // this.$refs['form-class'].validate((valid) => {
                    // console.log(valid)
                    // if (valid) {
                this.axios.get(this.$store.state.api + 'bj/up', {
                    params: {
                        id: this.params.row.id,
                        mc: this.formClass.className,
                        jcid: this.formClass.textbooks,
                        cid: 0,
                        lsid: this.formClass.teachers,
                        zjid: 0,
                        sj: this.formClass.classDate,
                        xs: this.formClass.studentNumber
                    }
                }).then( res => {
                    console.log(res)
                    this.$emit('close',{type:'upgrade',cancel:false})
                    this.isLoading = false;
                }).catch( res => {
                    console.log(res)
                    alert("添加数据失败")
                    this.isLoading = false;
                    // this.$emit('close','add')
                })
                //     } else {
                //         // alert("添加数据失败")
                //     }
                // });
            },
            cancel () {
                this.$emit('close',{type:'upgrade',cancel:true})
            },
            getteacherList () {
                this.axios.get(this.$store.state.api + 'ls/list')
                    .then( res => {
                        console.log(res)
                        let list = res.data.data.list;
                        list.forEach( (v,i) => {
                            if (v.iszj == "Y") {
                                this.teacherBossList.push(v)
                            }else{
                                this.teacherList.push(v)
                            }

                            if (this.formClass.teachers === v.zwm) {
                                this.formClass.teachers = v.id + ""
                            }

                            if (this.formClass.teacherBoss === v.zwm) {
                                this.formClass.teacherBoss = v.id + ""
                            }
                        })
                    }).catch( res => {
                        console.log(res)
                    })
            },
            getBookList () {
                this.axios.get(this.$store.state.api + 'jc/list')
                    .then( res => {
                        console.log(res)
                        this.bookList = res.data.data.list;
                        this.bookList.forEach( (v,i) => {
                            if (this.formClass.textbooks === v.mc) {
                                this.formClass.textbooks = v.id + "";
                            }
                        })
                    }).catch( res => {
                        console.log(res)
                    })
            }
        }
    }
</script>

<style lang="less" scoped>
    .edit-page {
        position: fixed;
        left:0;right:0;top:0;bottom:0;
        margin:auto;
        z-index: 999;

        .alert-box {
            width: 40%;
        }

        .select-block{
            display: block;
            width: 250px;
        }
        
        h2{
            text-align: center;
            line-height: 40px;
        }
        .left, .right {
            float: left;
            width: 50%;
            padding:10px 20px;
        }
        .left{
            border-right:1px solid #ccc;
        }
        .submit{
            width: 150px;
            margin:30px auto;
            margin-bottom:0;
        }
    }
</style>